<template>
  <div class="pending-tasks">
    <h3>待办事项</h3>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" class="task-item-container">
        <div>
          <div class="task-item">
            <span class="task-title">{{ task.title }}</span>
            <el-tooltip content="这是鼠标悬停时显示的文字提醒" placement="top">
              <img src="@/assets/images/img/yw.png" alt="描述性文字" />
            </el-tooltip>
          </div>

          <div class="task-status">
            <div class="status-item" v-for="(status, statusIndex) in task.statuses || []" :key="statusIndex">
              <el-badge :value="status.value" class="item">
                <el-button class="wide-button">{{ status.label }}</el-button>
              </el-badge>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tasks: Array
  }
};
</script>

<style scoped>
.pending-tasks {
  padding: 20px;
  border-radius: 8px;
  /*background-color: #f9f9f9;*/
  /*background-color: #fff;*/
  /*border: black solid 1px;*/
}

ul {
  list-style-type: none; /* 移除默认的列表项符号 */
  padding-left: 0; /* 移除默认的内边距 */
}
.task-item {
  display: flex;
  align-items: center;
  padding: 5px;
  gap: 6px;
}

img{
  width: 17px;
  height: 17px;
}

.task-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  border-left: 4px solid red;
  padding-left: 10px;
}

.task-count {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
}

.task-status {
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: space-between; /* 确保子元素分散 */
  /*border: #2c3e50 solid 1px;*/
}

.status-item {
  margin-right: 10px;
  margin-bottom: 8px;
  /*border: #2c3e50 solid 1px;*/
}

.wide-button {
  width: 80px;
  text-align: left;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  cursor: default;
}

.wide-button:hover {
  cursor: pointer;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
